<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>二维标签加载_基础</title>

    <link rel="stylesheet" href="./lib/styles.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
    <script type="text/javascript" src="./data/data.js"></script>
  </head>
  <body>
    <div id="player"></div>

    <div class="btn-list">
      <div onclick="add()" class="btn">创建街道分层设色</div>
      <div onclick="add2()" class="btn">创建电子围栏</div>
      <div onclick="clearLayer()" class="btn">清除点位</div>
    </div>

    <script type="text/javascript">
      /**
       * 创建文字点位
       */
      const add = () => {
        const colorStops = [
          [100, [131 / 255, 230 / 255, 255 / 255, 0.5], '#83e6ff'],
          [200, [154 / 255, 245 / 255, 146 / 255, 0.5], '#9af592'],
          [400, [252 / 255, 225 / 255, 72 / 255, 0.5], '#fce148'],
          [600, [250 / 255, 170 / 255, 66 / 255, 0.5], '#faaa42'],
          [1000, [255 / 255, 113 / 255, 47 / 255, 0.5], '#ff712f'],
          [3000, [250 / 255, 49 / 255, 49 / 255, 0.5], '#fa3131'],
          [5000, [184 / 255, 14 / 255, 14 / 255, 0.5], '#b80e0e']
        ]

        const polygonList = []
        const markerList = []
        streetPolygon.forEach((item, index) => {
          let p = {
            id: 'polygon' + index,
            coordinates: item.coordinates,
            coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
            range: [1, 10000], //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
            color: colorStops.find(stopItem => item.num < stopItem[0])[1], //多边形的填充颜色
            frameThickness: 0, //边框厚度
            intensity: 1, //亮度
            style: 0, //单色 请参照API开发文档选取枚举
            depthTest: false, //是否做深度检测 开启后会被地形高度遮挡
            priority: 1 //显示优先级 值越大显示越靠上
          }

          polygonList.push(p)

          let o1 = {
            id: 'marker' + index,
            coordinate: item.center, //坐标位置
            coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
            anchors: [0, 0], //锚点，设置Marker的整体偏移，取值规则和imageSize设置的宽高有关，图片的左上角会对准标注点的坐标位置。示例设置规则：x=-imageSize.width/2，y=imageSize.height
            range: [0, 500000], //可视范围

            text: item.name + ':' + item.num, //显示的文字
            useTextAnimation: true, //关闭文字展开动画效果 打开会影响效率
            textRange: [1, 1000], //文本可视范围[近裁距离, 远裁距离]
            textOffset: [0, 0], // 文本偏移
            textBackgroundColor: [1, 1, 1, 0], //文本背景颜色
            fontSize: 14, //字体大小
            fontOutlineSize: 2, //字体轮廓线大小
            fontColor: Color.White, //字体颜色
            fontOutlineColor: Color.Black //字体轮廓线颜色
          }

          markerList.push(o1)
        })

        // 添加dts polygon
        fdapi.polygon.add(polygonList)
        // 添加dts marker
        fdapi.marker.add(markerList)
        fdapi.camera.set(7904.229453, 5297.657305, 2675.68625, -85.998932, -149.733704, 2)
      }

      /**
       * 创建图标点位
       */
      const add2 = () => {
        const coordinates = [
          [7891.872890625, 4734.93904296875, 3.1990234375],
          [7957.311132812501, 4647.884809570312, 3.19904296875],
          [7981.1469140625, 4623.682734375, 3.3092578125000003],
          [8001.03830078125, 4611.75814453125, 3.1990234375],
          [8010.596640625, 4613.91720703125, 3.19904296875],
          [8019.828359375, 4621.75263671875, 3.2],
          [8053.29568359375, 4691.593881835937, 3.1990625],
          [8090.018242187501, 4778.222255859375, 3.19904296875],
          [8098.5708593750005, 4799.937099609375, 3.19904296875],
          [7953.093828125, 4836.029912109375, 3.19904296875],
          [7937.612421875, 4826.32970703125, 3.198984375],
          [7917.940859375, 4809.233720703125, 3.1990625],
          [7894.1401171875, 4778.581005859375, 3.19904296875],
          [7881.18296875, 4763.4959375, 3.1990234375],
          [7881.568046875001, 4749.245166015625, 3.2]
        ]

        let o1 = {
          id: 'p3d1',
          coordinates: coordinates,
          coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
          color: [0, 1, 1, 0.51], //颜色值
          height: 20, //3D多边形的高度
          intensity: 1.0, //亮度
          style: 3, //3DPolygon的样式 请参照API开发文档选取枚举
          tillingX: 0, //可选，仅当3DPolygon的样式支持贴图显示，贴图横向平铺
          tillingY: 0, //可选，仅当3DPolygon的样式支持贴图显示，贴图纵向平铺
          generateTop: false, //是否生成顶面
          generateSide: true, //是否生成侧面
          generateBottom: false //是否生成底面
        }

        fdapi.polygon3d.add(o1)
        fdapi.camera.set(8170.088438, 4676.273896, 68.720654, -13.000452, -158.35762, 2)
      }

      const clearLayer = () => {
        fdapi.marker.clear()
        fdapi.polygon.clear()
        fdapi.polygon3d.clear()
      }
      /**
       * 初始化场景
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          apiOptions: {
            onReady: function () {
              fdapi.reset(2 | 4)
            }
          }
        })
      }

      /**
       * 自适应分辨率
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      // 页面加载调用
      window.addEventListener('load', OnLoad, true)

      // 页面窗口变换调用
      window.addEventListener('resize', onResize, true)
    </script>
  </body>
</html>
